<template>
  <div class="list">
    <van-nav-bar title="搜索列表" left-arrow border safe-area-inset-top z-index="999" @click-left="$router.back()" />
    <!-- 搜索框 -->
    <div class="search">
      <div class="search-input">
        <van-search shape="round" @search="goSearch(goodsName)"  background="white"  v-model="goodsName" maxlength="20">
        </van-search>
      </div>
      <div class="tool">
        <van-icon name="qr" size="25px"/>
      </div>
    </div>
    <!-- 搜索条件 -->
    <div class="query-items">
      <van-row>
        <van-col span="8"><span>综合</span></van-col>
        <van-col span="8"><span>价格</span></van-col>
        <van-col span="8"><span>销量</span></van-col>
      </van-row>
    </div>
    <van-divider />
    <!-- 商品页 -->
    <div class="goods-list">
      <GoodsItem v-for="item in proList" :key="item.goods_id" :item='item'></GoodsItem>
    </div>
  </div>
</template>

<script>
import GoodsItem from '@/components/GoodsItem'
import { getProList } from '@/api/product'
import { setHistory, getHistory } from '@/utils/storage'
export default {
  name: 'ListIndex',
  components: {
    GoodsItem
  },
  data () {
    return {
      sortType: 'all',
      sortPrice: 0,
      categoryId: 0,
      page: 1,
      proList: [],
      goodsName: '',
      history: getHistory()
    }
  },
  computed: {
    querySearch () {
      return this.$route.query.goodsName
    },
    queryCategoryId () {
      return this.$route.query.categoryId
    }
  },
  async created () {
    console.log(this.querySearch, this.queryCategoryId)
    const { data: { list } } = await getProList({
      categoryId: this.queryCategoryId,
      goodsName: this.querySearch,
      page: this.page
    })
    this.proList = list.data
    console.log(this.proList)
  },
  methods: {
    // 搜索列表内搜索
    async goSearch (goodsName) {
      const searchKey = goodsName.trim()
      if (searchKey !== '') {
        const index = this.history.indexOf(goodsName)
        if (index !== -1) {
          this.history.splice(index, 1)
        }
        this.history.unshift(goodsName)
        setHistory(this.history) // 保存搜索历史到本地存储
      }
      console.log('搜索', goodsName)
      const { data: { list } } = await getProList({
        categoryId: this.queryCategoryId,
        goodsName: searchKey,
        page: this.page
      })
      this.proList = list.data
      console.log(this.proList)
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/search.less';
.list {
  .van-nav-bar {
    background-color: #66ccff;
    height: auto;

    ::v-deep .van-nav-bar__title {
      color: #1114ac;
    }
  }
  .search {
    display: flex;
    height: search-height;
    .search-input {
      flex: 90%;
    }
    .tool {
      flex: 10%;
      justify-content: center;
      align-items: center;
      display: flex;
    }
  }
  .query-items{
    margin: 0 2%;
    .van-row {
      .van-col {
        height: 35px;
        justify-content: center;
        align-items: center;
        display: flex;
      }
    }
  }
}
</style>
